<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5最新经典俄罗斯方块游戏</title>
	<meta name="description" content="这是一款使用html、javascript和css制作的经典俄罗斯方块小游戏。该俄罗斯方块小游戏功能齐全，可以正常旋转方块，消行，快速下落等。" />
	<link href='css/css.css' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="css/blockrain.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		#versus h1,#examples h1{font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
	</style>
	<!--[if IE]>
		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
		<div class="content bgcolor-8">
			<!--<div class="game-wrapper">
				<div class="game" ></div>
			</div>-->
			<section id="versus">
			  <header>
			    <h1>让电脑自己对战</h1>
			  </header>

			  <article id="versus-arena">
			    <div class="game-holder" id="tetris-versus-1">
			      <div class="score">0</div>
			      <div class="game"></div>
			    </div>

			    <div class="game-holder" id="tetris-versus-2">
			      <div class="score">0</div>
			      <div class="game"></div>
			    </div>
			  </article>
			</section>
			<section id="examples">
			  <header>
			    <h1>自己玩一把！</h1>
			  </header>
			  <article id="example-slider">
			    <div class="example">
			      <div class="theme">theme: <strong>"vim"</strong></div>
			      <div class="instructions">
			        Use only arrows
			        <div class="keyboard">
			          <div class="key key-up"></div>
			          <div class="key key-left"></div>
			          <div class="key key-down"></div>
			          <div class="key key-right"></div>
			        </div>
			      </div>
			      <div class="game" id="tetris-demo"></div>
			    </div>
			    <div class="buttons">
			      <a href="" class="btn btn-prev">Previous</a>
			      <a href="" class="btn btn-next">Next</a>
			    </div>
			  </article>
			</section>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/blockrain.jquery.min.js" type="text/javascript"></script>
	<script>
	  var $cover = $('#cover-tetris').blockrain({
	    autoplay: true,
	    autoplayRestart: true,
	    speed: 100,
	    autoBlockWidth: true,
	    autoBlockSize: 25,
	    theme: 'candy'
	  });
	  

	  var versusSpeed = 500;

	  var $versus1 = $('#tetris-versus-1 .game').blockrain({
	    autoplay: true,
	    autoplayRestart: true,
	    speed: versusSpeed,
	    onGameOver: function() {
	      $versus1.blockrain('restart');
	      $versus2.blockrain('restart');
	      var $score = $versus2.parent().find('.score');
	      $score.text( parseInt($score.text()) + 1 );
	    }
	  });
	  var $versus2 = $('#tetris-versus-2 .game').blockrain({
	    autoplay: true,
	    autoplayRestart: true,
	    speed: versusSpeed,
	    onGameOver: function() {
	      $versus1.blockrain('restart');
	      $versus2.blockrain('restart');
	      var $score = $versus1.parent().find('.score');
	      $score.text( parseInt($score.text()) + 1 );
	    }
	  });


	  var $demo = $('#tetris-demo').blockrain({
	    speed: 20,
	    theme: 'vim',
	    onStart: function() {
	      ga( 'send', 'event', 'tetris', 'started');
	    },
	    onLine: function() {
	      ga( 'send', 'event', 'tetris', 'line');
	    },
	    onGameOver: function(score){
	      ga( 'send', 'event', 'tetris', 'over', score);
	    }
	  });

	  $('#example-slider').find('.btn-next').click(function(event){
	    event.preventDefault();
	    switchDemoTheme(true);
	  });
	  $('#example-slider').find('.btn-prev').click(function(event){
	    event.preventDefault();
	    switchDemoTheme(false);
	  });

	  function switchDemoTheme(next) {

	    var themes = Object.keys(BlockrainThemes);

	    var currentTheme = $demo.blockrain('theme');
	    var currentIx = themes.indexOf(currentTheme);

	    if( next ) { currentIx++; }
	    else { currentIx--; }

	    if( currentIx >= themes.length ){ currentIx = 0; }
	    if( currentIx < 0 ){ currentIx = themes.length-1; }

	    $demo.blockrain('theme', themes[currentIx]);
	    $('#example-slider .theme strong').text( '"'+themes[currentIx]+'"' );
	  }
	</script>
</body>
</html>